<template>
	<uni-popup ref="popupRef" type="bottom">
		<view class="main">
			<view class="main-header">
				请选择地区
			</view>
			<view class="main-body">
				<scroll-view :scroll-top="50" scroll-y="true" class="scroll-Y">
					<view class="item" :class="i.id == parent_id ? 'active':''" v-for="i in provinceList" :key="i.id" @click="handleSelect(i)">{{ i.areaname }}</view>
				</scroll-view>
				<scroll-view :scroll-top="50" scroll-y="true" class="scroll-Y">
					<view class="item" v-for="i in cityList" :key="i.id" @click="check(i)">{{ i.areaname }}</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const popupRef = ref(null)
	const close = () => {
		popupRef.value.close()
	}
	const open = () => {
		popupRef.value.open()
		parent_id.value = null
		getProvince()
	}
	// 获取省份接口
	let provinceList = ref([])
	const province = ref('')
	const city = ref('')
	const getProvince = async () => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.getProvincesList',
				type: 3,
			});
			provinceList.value = res.data
		} catch (e) {
			//TODO handle the exception
		}
	}
	// 获取市区接口
	let parent_id = ref(null)
	let cityList = ref([])
	const getCity = async () => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.getCitysByProvince',
				type: '3',
				parent_id: parent_id.value
			});
			cityList.value = res.data
		} catch (e) {
			//TODO handle the exception
		}
	}
	const handleSelect = (i)=> {
		parent_id.value = i.id
		province.value = i.areaname
		getCity()
	}
	const emit = defineEmits(["checkSuccess"])
	const check = (i)=> {
		city.value = i.areaname
		emit('checkSuccess',province.value + city.value)
		close()
	}
	defineExpose({
		close,
		open
	})
</script>

<style lang="scss" scoped>
	.main {
		background-color: #fff;
		&-header{
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			padding: 28rpx;
		}
		&-body{
			display: flex;
		}
	}

	.scroll-Y {
		height: 700rpx;
	}
	.item {
		padding: 20rpx;
	}
	.active{
		color: #1A64FF !important;
	}
</style>